<template>
  <div>
    <el-dialog :close-on-click-modal="false" :title="title" :visible="isShow" top="20vh" width="700px" @close="close">
      <el-form ref="form" :model="deptForm" :rules="deptRules" label-width="100px">
        <el-form-item label="部门名称" prop="name">
          <el-input v-model="deptForm.name" placeholder="2-10个字符" size="small" />
        </el-form-item>
        <el-form-item label="部门编码" prop="code">
          <el-input v-model="deptForm.code" placeholder="2-10个字符" size="small" />
        </el-form-item>
        <el-form-item label="部门负责人" prop="managerId">
          <el-select v-model="deptForm.managerId" placeholder="请选择负责人" size="small" style="width: 100%;">
            <!-- 下拉选项 循环 负责人数据 label表示显示的字段 value 存储字段 -->
            <el-option v-for="item in managerList" :key="item.id" :label="item.username" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="部门介绍" prop="introduce">
          <el-input v-model="deptForm.introduce" :rows="4" placeholder="1-100个字符" type="textarea" />
        </el-form-item>
        <el-form-item>
          <el-button size="small" @click="cancel">取消</el-button>
          <el-button :loading="loading" size="small" type="primary" @click="confirm">
            <i v-if="!deptForm.id" class="el-icon-circle-plus-outline" style="padding-right: 5px" />
            <i v-else class="el-icon-edit-outline" style="padding-right: 5px" />
            确认
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  addDepartment,
  updateDepartment,
  getDepartmentDetail,
  getDepartmentList,
  getDeptManager
} from '@/api/department.js'

export default {
  name: 'DepartmentDialog',
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    currentDeptId: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      loading: false,
      managerList: [],
      deptForm: {
        code: '', // 部门编码
        introduce: '', // 部门介绍
        managerId: '', // 部门负责人
        name: '', // 部门名称
        pid: '' // 父级部门id
      },
      deptRules: {
        // 校验1: 2-10个字符之间. 校验2: 同级部门中不能出现重复部门名字
        name: [
          { required: true, message: '请输入部门名称', trigger: 'blur' },
          { min: 2, max: 10, message: '部门名称应为2-10个字符', trigger: 'blur' },
          {
            trigger: 'blur',
            // 校验2: 同级部门中不能出现重复部门名字
            validator: async (rule, value, callback) => {
              let result = await getDepartmentList()
              // 判断是编辑部门场景还是新增部门场景
              if (this.deptForm.id) {
                // 如果是在编辑部门场景下，就排除自身，去和数据库中的其他对比
                result = result.filter(item => item.id !== this.deptForm.id)
              }
              if (result.some(item => item.name === value)) {
                callback(new Error('部门名称已存在，请重新输入！'))
              } else {
                callback()
              }
            }
          }
        ],
        // 校验1: 2-10个字符之间. 校验2: 所有部门编码不可以重复
        code: [
          { required: true, message: '请输入部门编码', trigger: 'blur' },
          { min: 2, max: 10, message: '部门编码应为2-10个字符', trigger: 'blur' },
          {
            trigger: 'blur',
            validator: async (rule, value, callback) => {
              let res = await getDepartmentList()
              // 判断是编辑部门场景还是新增部门场景
              if (this.deptForm.id) {
                // 如果是在编辑部门场景下，就排除自身，去和数据库中的其他对比
                res = res.filter(item => item.id !== this.deptForm.id)
              }
              if (res.some(item => item.code === value)) {
                callback(new Error('部门编码重复，请重新输入！'))
              } else {
                callback()
              }
            }
          }
        ],
        managerId: [
          { required: true, message: '请选择负责人', trigger: 'blur' }
        ],
        introduce: [
          { required: true, message: '请输入部门介绍', trigger: 'blur' },
          { min: 1, max: 100, message: '部门介绍应为1-100个字符', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getDepartmentManager()
  },
  methods: {
    // 点击取消关闭对话框
    cancel() {
      this.close()
    },
    close() {
      // 关闭对话框
      this.$emit('update:isShow', false)
      // 重置表单
      this.deptForm = {}
      this.$refs.form.resetFields()
    },
    confirm() {
      // 表单整体校验
      this.$refs.form.validate(async success => {
        if (success) {
          this.loading = true
          // 根据部门id是否存在区分是新增场景还是编辑场景，如果是新增场景，部门id为空，如果是编辑场景，部门id不为空
          if (!this.deptForm.id) {
            // 新增部门
            // 表单校验通过，调用添加部门接口，添加部门
            await addDepartment({ ...this.deptForm, pid: this.currentDeptId })
          } else {
            // 编辑部门
            // 表单校验通过，调用编辑部门接口，编辑部门
            await updateDepartment(this.deptForm, this.currentDeptId)
          }
          // 更新父组件
          this.$emit('updateDepartment')
          // 提示成功信息
          this.$message.success(this.deptForm.id ? '更新部门成功！' : '添加部门成功！')
          // 关闭弹框
          this.cancel()
          this.loading = false
        }
      })
    },
    // 获取部门负责人
    async getDepartmentManager() {
      this.managerList = await getDeptManager()
    },
    // 获取部门详情
    async getDepartmentDetail() {
      this.deptForm = await getDepartmentDetail(this.currentDeptId)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
